<template>
	<zui-watermark content="东莞宏悦酒业" :opacity="0.08" :overlay="0.5"></zui-watermark>
	<view style="background-color: #F7F7F7;" class="u-flex u-flex-around u-flex-items-center u-p-32">
		<view class="icon-item">
			<view class="iconfont">&#xe65d;</view>
			<view class="icon-text">寄件报单</view>
		</view>
		<view class="right iconfont">&#xe748;</view>
		<view class="icon-item">
			<view class="iconfont">&#xe7c7;</view>
			<view class="icon-text">送货上门</view>
		</view>
		<view class="right iconfont">&#xe748;</view>
		<view class="icon-item">
			<view class="iconfont">&#xe607;</view>
			<view class="icon-text">签收入库</view>
		</view>
		<view class="right iconfont">&#xe748;</view>
		<view class="icon-item">
			<view class="iconfont">&#xe72a;</view>
			<view class="icon-text">结算打款</view>
		</view>
	</view>
	<view class="u-p-32">
		<view class="form-title">寄件报单</view>
		<up-form labelPosition="top" errorType="toast" label-width="200px" :model="form" :rules="rules" ref="formRef">
			<up-form-item prop="name" label="物品名称" required>
				<up-input v-model="form.name" color="#000" prefixIcon="file-text"
					prefixIconStyle="margin-right: 6px;color: #AAA;" placeholder="请输入物品名称"></up-input>
			</up-form-item>
			<up-form-item prop="express" label="快递公司" required>
				<picker :range="ExpressList" style="width: 100%;" @change="ExpressChange">
					<up-input v-model="form.express" readonly color="#000" prefixIcon="grid"
						prefixIconStyle="margin-right: 6px;color: #AAA;" placeholder="请输入选择快递公司"></up-input>
				</picker>
			</up-form-item>
			<up-form-item label="快递单号" required>
					<view v-for="(data,index) in numberList" :key="index" class="u-flex u-flex-items-center u-flex-between u-m-b-24" style="width: 100%;"  >
						<view style="flex: 1;margin-right: 20px;">
							<up-input v-model="data.number" color="#000" prefixIcon="file-text"
								prefixIconStyle="margin-right: 6px;color: #AAA;" placeholder="请输入快递单号"></up-input>
						</view>
						<view @click="AddNumber" v-if="index == 0">
							<up-text prefixIcon="plus-circle" size="12" color="#127eff" iconStyle="font-size: 14px;margin-right: 4px;color: #127eff" text="添加单号"></up-text>
						</view>
						<view @click="ReduceNumber(index)" v-else>
							<up-text prefixIcon="minus-circle" size="12" color="#E94359" iconStyle="font-size: 14px;margin-right: 4px;color: #E94359" text="移除单号"></up-text>
						</view>
					</view>
			</up-form-item>
			<up-form-item prop="remark" label="报单备注">
				<up-textarea v-model="form.remark" placeholder="请详细描述你的需求，以便让讲师快速了解"></up-textarea>
			</up-form-item>
		</up-form>
		<up-button :custom-style="{
			height: '44px',
			borderRadius: '4px',
			color: '#FFFFFF',
			background: '#165dff',
			fontSize: '13px',
			marginTop: '20px'
		}" @click="Add">
			<text class="f-w-b">提 交</text>
		</up-button>
	</view>

	<up-popup :show="show" mode="center" :safeAreaInsetBottom="false" :round="12" :closeable="false">
		<view class="popup-box">
			<view class="_area">
				<up-image
					src="https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2025/05/21/png/708c756d18c3677b6956e28d8838fae1fcbab55a15e0b-vFkadp_fw1200_20250521091144A001.png"
					width="180px" height="auto" mode="widthFix"></up-image>
				<view class="u-m-t-20 u-info" style="text-align: center;font-size: 12px;color: #aaa;">
					系统已将您提交的单据移至订单库，我们会实时更新您的订单状态</view>
				<up-button :custom-style="{
					height: '38px',
					borderRadius: '4px',
					color: '#FFFFFF',
					background: '#127eff',
					fontSize: '13px',
					marginTop: '24px'
				}" @click="Know">
					<text class="f-w-b">知道了</text>
				</up-button>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		reactive,
		ref,
		toRefs,
		getCurrentInstance
	} from 'vue';
	import ManifestApi from '@/Api/Manifest.js'

	const {
		proxy
	} = getCurrentInstance();
	const ExpressList = [
		"中通快递",
		"申通快递",
		"圆通快递",
		"百世快递",
		"顺丰速运",
		"韵达快递",
		"邮政EMS",
		"天天快递",
		"京东物流",
		"极兔快递",
		"优速快递",
		"其他快递"
	]
	const show = ref(false)
	const FormData = reactive({
		form: {
			name: '',
			number: '',
			express: '',
			remark: ''
		},
		numberList: [{
			number:''
		}],
		rules: {
			name: {
				type: 'string',
				required: true,
				message: '请输入姓名',
			},
			express: {
				type: 'string',
				required: true,
				message: '请选择快递公司',
			},
		}
	})
	const {
		form,
		rules,
		numberList
	} = toRefs(FormData);

	const ExpressChange = (e) => {
		const index = e.detail.value
		form.value.express = ExpressList[index]
	}


	const Add = () => {
		proxy.$refs["formRef"].validate().then(valid => {
			if(!numberList.value.every(item => item.number)){
				uni.showToast({
					title: '存在未填写的快递单号',
					icon: 'none'
				})
				return
			}
			ManifestApi.Add({
				...form.value,
				number: numberList.value.map(item => item.number).join('|')
			}).then(res => {
				show.value = true
			})
		})
	}
	
	const AddNumber = () => {
		numberList.value.push({
			number: ''
		})
	}
	
	const ReduceNumber = (e) => {
		numberList.value.splice(e,1)
	}

	const Know = () => {
		show.value = false
		numberList.value = [{
			number: ''
		}]
		form.value = {
			name: '',
			number: '',
			express: '',
			remark: '',
		}
	}
</script>

<style lang="scss" scoped>
	.icon-item {
		text-align: center;

		.iconfont {
			font-size: 24px;
			color: #000;
		}

		.icon-text {
			margin-top: 8px;
			font-size: 10px;
			color: #000;
		}
	}

	.form-title {
		font-size: 15px;
		font-weight: bolder;
		color: #000;
		margin-bottom: 18px;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-size: 13px !important;
		color: #323e54;
		font-weight: 500;
		line-height: 24px;
		margin-bottom: 6px;
	}

	::v-deep .u-form-item__body__left__content__required {
		color: #E94359 !important;
		font-size: 15px !important;
		position: unset !important;
		top: unset !important;
		line-height: 24px !important;
		margin-right: 4px;
	}

	.error-color {
		color: #E94359;
	}

	::v-deep .input-placeholder {
		color: #a4b3c8;
		font-size: 12px;
	}

	::v-deep .u-textarea {
		padding: 6px 9px;
	}

	::v-deep .u-textarea__field {
		color: #000 !important;
	}

	::v-deep .u-form-item__body__right__content__slot{
		display: unset !important;
	}

	.popup-box {
		width: 240px;
		height: 246px;
		position: relative;

		._area {
			position: absolute;
			width: 180px;
			top: 68px;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>